// 使用import引入需要的库
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'element-ui/lib/theme-chalk/index.css';
import '@/icons'; //svg icon
import './permission.js';

// main.js 是VUE项目的入口文件是，整个Vue项目的起点，负责初始化和启动整个应用。
// 它会创建Vue实例，并将其挂载到根组件中指定的DOM元素上，并配置路由、状态管理等。
// 通过main.js，可以配置Vue应用的各种选项、注册全局组件、引入需要的库或者插件，以及进行一些全局的初始化配置操作


// Vue.use 用于注册 Vue 插件，插件必须包含一个 install 方法。这种方式适用于注册 Vue 官方组件和遵循 Vue 插件规范的第三方组件。
// Vue.prototype 用于在 Vue 实例的原型上添加属性或方法，适用于添加第三方库或全局变量，这些库或变量不是以 Vue 插件的形式提供的。

// 使用Vue.use方法引入全局组件
import animated from 'animate.css';  // css效果库  npm install animate.css --save安装，在引入
Vue.use(animated);
import VueParticles from 'vue-particles' // 粒子特效插件
Vue.use(VueParticles);
import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/zh-CN';
Vue.use(ElementUI, { locale }); // 带有参数的插件，locale为选项参数

// 使用Vue.prototype引入全局组件
import qs from 'qs'; // 在vue项目开发过程中，使用axios请求后台时，后台无法获取前端传参数据。qs 是一个增加了一些安全性查询字符串解析和序列化字符串的库。
Vue.prototype.$qs = qs; // 配全局属性配置，在任意组件内可以使用this.$qs获取qs对象 


// 阻止显示生产模式的消息，默认是true
Vue.config.productionTip = false;

//  new Vue 代表新建vue对象，vue对象常见的有七大属性：https://blog.csdn.net/qq_51933234/article/details/138067677
// 1.el: 挂载点，创建vue实例时，可以通过el属性来告诉vue哪个DOM元素应该被实例接管。
// 2.data：用来保存设置的数据或者请求的数据。该类型可以是Object的，但是在组件（component）里的定义的data必须是方法类型的。
// 3.method：用来编写需要调用的方法。
// 4.template：模板，可以通过temple来自定义页面，替换一些页面的元素。
// 5.render：是一个渲染器，可以创建虚拟的DOM。
// 6.computed：Vue的计算属性，可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。computed设置的初衷是能够解决复杂的计算，而不是直接在模板字符串里进行运算。
// 7.watch：watch是一个监听器，用来监视某个值，当某个值满足什么条件时，应该做什么操作。
new Vue({
  // 将创建出的Vue实例挂载到根组件中id为app的DOM元素上，这样一来，Vue应用就可以在指定的DOM元素内部进行渲染和交互
  el: '#app',
  // 路由
  router,
  store,
  components: { App },
  // 使用App.vue作为根组件，Vue创建的实力会渲染根组件
  template: '<App/>'
})